<template>
  <div class="posts">
    <!-- 头部 -->
    <header class="posts_header">
      <div class="mask"></div>
      <div class="posts_title">
        <h3>{{ essayData.title }}</h3>
      </div>
    </header>

    <!-- 内容 -->
    <main class="posts_main">
      <!-- 粒子特效 -->
      <div class="posts_main_lizi">
        <vue-particles
          color="#666"
          :particleOpacity="0.7"
          :particlesNumber="100"
          shapeType="circle"
          :particleSize="3"
          linesColor="#ccc"
          :linesWidth="2"
          :lineLinked="true"
          :lineOpacity="0.6"
          :linesDistance="150"
          :moveSpeed="3"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="true"
          class="lizi"
        >
        </vue-particles>
      </div>
      <!-- 卡片内容 -->
      <div class="posts_content">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <!-- 文章标题 -->
            <div class="box_title">
              <a
                href="#"
                style="background:#087de7;color:#fff; padding: 0 10px;"
                >{{ essayData.title }}</a
              >
              <span style="float: right; padding: 3px 0; color: #3fdb9f;"
                ><i class="el-icon-notebook-2"></i>{{ essayData.des }}</span
              >
            </div>
            <!-- 发布日期 -->
            <div class="times">
              <span
                ><i class="el-icon-timer"></i> 发布日期：
                {{ essayData.times }}</span
              >
            </div>
          </div>
          <!-- 文章内容开始 -->
          <div class="card_content">
            <div class="data_list" v-html="essayData.content">
              <!--显示内容区域-->
            </div>
          </div>
          <p class="mores">
            <router-link :to="{ name: 'frontend' }"> 更多文章 </router-link>
          </p>
        </el-card>
      </div>
    </main>

    <!-- 尾部 -->
    <Footer />
  </div>
</template>

<script>
import Footer from '@/components/Footer.vue'

export default {
  async asyncData({ params, $axios }) {
    var id = params.id
    var { data: res } = await $axios.get(
      'http://47.107.156.169:3000/api/v1/mores',
      {
        params: { id: id }
      }
    )
    if (res.meta.status !== 200) return alert('获取文章失败')
    var date = new Date(res.data[0].times)
    var y = date.getFullYear()
    var m = (date.getMonth() + 1 + '').padStart(2, '0')
    var d = (date.getDate() + '').padStart(2, '')
    res.data[0].times = y + '年' + m + '月' + d + '日' + ''
    return { essayData: res.data[0] }
  },
  data() {
    return {
      flag: false
    }
  },
  methods: {
    // 是否加载特效
    show() {
      this.flag = true
    }
  },
  mounted() {
    this.show()
  },
  components: {
    Footer
  }
}
</script>

<style lang="scss" scoped>
.posts {
  font-size: 15px;
  .posts_header {
    position: relative;
    display: flex;
    height: 375px;
    width: 100%;
    background: url('//s1.ax1x.com/2020/05/24/YzrUXj.jpg') top;
    background-size: cover;
    z-index: 2;
    .posts_title {
      width: 1200px;
      height: 50px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 30px;
      z-index: 4;
      text-align: center;
      h3 {
        font-weight: 200;
      }
    }
  }
  .mask {
    width: 100%;
    height: 375px;
    position: absolute;
    background-color: #3d4f83;
    top: 0;
    left: 0;
    z-index: 3;
    opacity: 0.6;
  }
  .posts_main {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #f5f5f5;
    .posts_main_lizi{
      position: relative;
      z-index: 1;
    }
    .particles {
      width: 100%;
      min-height: 100%;
      position: fixed;
      top: 0;
      left: 0;
    }
    .posts_content {
      width: 1000px;
      margin: 0 auto;
      position: relative;
      z-index: 3;
    }
    .box-card {
      position: relative;
      top: -60px;
      min-height: 441px;
    }
  }
  .clearfix {
    a {
      display: inline-block;
      height: 24px;
      line-height: 24px;
      min-width: 120px;
      text-align: center;
      color: #42b983;
      border-radius: 15px;
    }
  }
  .times {
    margin-top: 30px;
    color: #606c89;
    span {
      padding-left: 40px;
    }
  }
  .out {
    margin-left: 400px;
    color: royalblue !important;
    width: 50px !important;
  }
  .mores {
    margin-top: 20px;
    text-align: right;
  }
  .mores a {
    padding-right: 66px;
    color: #1186f4;
    text-decoration: underline;
    font-size: 13px;
  }
  .box_title {
    overflow: hidden;
  }
  .data_list {
    padding-left: 10px;
  }
}
</style>
